<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="Robots" content="noindex, nofollow">
<title>Floatbox v4.26 Options</title>
<style type="text/css">
body { font-family:Verdana, Arial, Helvetica, sans-serif; line-height: 17px; font-size:13px; background-color:#fafafa; }
#content { margin:1em 25px; }
h2 { font-size:1.3em; margin:.7em 0 .2em 0; color:#046; }
h3 { font-size: 1.15em; margin:-.3em 0 .8em 0; color: #046; }
h4 { font-size:1em; margin:.7em 0 0 0; color:#046; }
h5 { font-size:.9em; margin:1.2em 0 0 0; }
p { margin:.6em 0 0 1.5em; }
.code, .blockcode { font-family:"Courier New", Courier, monospace; font-size:0.85em; color:#603; background-color:#eaeaea; }
.blockcode { display:block; margin-top:0.5em; }
ul, ol { margin-top:.4em; }
li { margin-top:.3em; }
ul.index ul { list-style-type:none; margin:0 0 7px 15px; padding:0; }
.index li { margin-top:.2em; }
div.separator { height:1px; width:80%; font-size:1px; margin:24px 0; border-color:#000; border-style:solid; border-width:1px 0; }
</style>
</head>
<body>
<div id="content">
<h2>Floatbox v4.26 - Options</h2>
<a href="http://randomous.com/floatbox/home">randomous.com</a>

<div id="index">
<div class="separator"></div>

<h4>Index (and quick-reference)</h4>
<ul class="index">

<li><a href="#appearance">Appearance</a>
<ul>
<li>roundCorners - <i>'all'</i> | 'top' | 'none'</li>
<li>cornerRadius - 8 | <i>12</i> | 20</li>
<li>shadowType - <i>'drop'</i> | 'hybrid' | 'halo' | 'none'</li>
<li>shadowSize - 8 | <i>12</i> | 16 | 24</li>
<li>outerBorder - pixels (1)</li>
<li>innerBorder - pixels (1)</li>
<li>padding - pixels (24)</li>
<li>panelPadding - pixels (8)</li>
<li>overlayOpacity - 0-100 (55)</li>
<li>controlsOpacity - 0-100 (60)</li>
</ul>
</li>

<li><a href="#animations">Animations</a>
<ul>
<li>doAnimations - <i>true</i> | false</li>
<li>resizeDuration - 0-10 (3.5)</li>
<li>imageFadeDuration - 0-10 (3)</li>
<li>overlayFadeDuration - 0-10 (4)</li>
<li>startAtClick - <i>true</i> | false</li>
<li>zoomImages - <i>true</i> | false</li>
<li>liveImageResize - <i>true</i> | false</li>
<li>splitResize - <i>'no'</i> | 'auto' | 'wh' | 'hw'</li>
</ul>
</li>

<li><a href="#colors">Colors</a>
<ul>
<li>colorTheme - 'auto' | 'black' | 'white' | 'blue' | 'yellow' | 'red' | 'custom'</li>
<li>mainColor - css color</li>
<li>overlayColor - css color</li>
<li>innerBorderColor - css color</li>
<li>outerBorderColor - css color</li>
<li>textColor - css color</li>
<li>strongTextColor - css color</li>
</ul>
</li>

<li><a href="#size">Size</a>
<ul>
<li>autoFitImages - <i>true</i> | false</li>
<li>autoFitHTML - <i>true</i> | false</li>
<li>autoFitMedia - <i>true</i> | false</li>
<li>autoFitSpace - pixels (5)</li>
<li>resizeImages - <i>true</i> | false</li>
<li>resizeTool - <i>'cursor'</i> | 'topleft' | 'both'</li>
<li>enableDragResize - true | <i>false</i></li>
<li>stickyDragResize - <i>true</i> | false</li>
<li>draggerLocation - <i>'frame'</i> | 'content'</li>
</ul>
</li>

<li><a href="#position">Position</a>
<ul>
<li>boxLeft - <i>'auto'</i> | pixels | '[-]xx%'</li>
<li>boxTop - <i>'auto'</i> | pixels | '[-]xx%'</li>
<li>captionPos - 'tl' | 'tc' | 'tr' | <i>'bl'</i> | 'bc' | 'br'</li>
<li>caption2Pos - 'tl' | <i>'tc'</i> | 'tr' | 'bl' | 'bc' | 'br'</li>
<li>infoLinkPos - 'tl' | 'tc' | 'tr' | <i>'bl'</i> | 'bc' | 'br'</li>
<li>printLinkPos - 'tl' | 'tc' | 'tr' | <i>'bl'</i> | 'bc' | 'br'</li>
<li>newWindowLinkPos - 'tl' | 'tc' | <i>'tr'</i> | 'bl' | 'bc' | 'br'</li>
<li>itemNumberPos - 'tl' | 'tc' | 'tr' | <i>'bl'</i> | 'bc' | 'br'</li>
<li>indexLinksPos - 'tl' | 'tc' | 'tr' | 'bl' | 'bc' | <i>'br'</i></li>
<li>controlsPos - 'tl' | 'tr' | 'bl' | <i>'br'</i></li>
<li>centerNav - true | <i>false</i></li>
<li>enableDragMove - true | <i>false</i></li>
<li>stickyDragMove - <i>true</i> | false</li>
</ul>
</li>

<li><a href="#controls">Controls</a>
<ul>
<li>showClose - <i>true</i> | false</li>
<li>showItemNumber - <i>true</i> | false</li>
<li>showPrint - true | <i>false</i></li>
<li>printCSS - css text | css filepath</li>
<li>printText - string</li>
<li>infoOptions - option string</li>
<li>infoText - string</li>
<li>showNewWindow - true | <i>false</i></li>
<li>showNewWindowIcon - <i>true</i> | false</li>
<li>closeOnNewWindow - true | <i>false</i></li>
<li>controlsType - <i>'auto'</i> | 'international' | 'english'</li>
<li>strongControls - true | <i>false</i></li>
<li>showHints - 'always' | <i>'once'</i> | 'never'</li>
<li>outsideClickCloses - <i>true</i> | false</li>
<li>imageClickCloses - true | <i>false</i></li>
<li>enableKeyboardNav - <i>true</i> | false</li>
</ul>
</li>

<li><a href="#galleries">Galleries</a>
<ul>
<li>navType - 'overlay' | 'button' | <i>'both'</i> | 'none'</li>
<li>navOverlayWidth - 0-50 (35)</li>
<li>navOverlayPos - 0-100 (30)</li>
<li>showNavOverlay - 'always' | 'once' | <i>'never'</i></li>
<li>enableWrap - <i>true</i> | false</li>
<li>numIndexLinks - number (0)</li>
<li>showIndexThumbs - <i>true</i> | false</li>
<li>maxIndexThumbSize - pixels (0)</li>
<li>randomOrder - true | <i>false</i></li>
</ul>
</li>

<li><a href="#slideshows">Slideshows</a>
<ul>
<li>doSlideshow - true | <i>false</i></li>
<li>slideInterval - seconds (4.5)</li>
<li>endTask - 'stop' | <i>'exit'</i> | 'loop'</li>
<li>showPlayPause - <i>true</i> | false</li>
<li>startPaused - true | <i>false</i></li>
<li>pauseOnPrev - <i>true</i> | false</li>
<li>pauseOnNext - true | <i>false</i></li>
<li>pauseOnResize - <i>true</i> | false</li>
</ul>
</li>

<li><a href="#tooltips">Tooltips</a>
<ul>
<li>source - a content reference</li>
<li>attachToHost - true | <i>false</i></li>
<li>moveWithMouse - true | <i>false</i></li>
<li>placeAbove - true | <i>false</i></li>
<li>timeout - seconds (0)</li>
<li>delay - milliseconds (80)</li>
<li>mouseSpeed - pixels per second (120)</li>
<li>fadeDuration - 0-10 (3)</li>
<li>defaultCursor - true | <i>false</i></li>
</ul>
</li>

<li><a href="#cyclers">Image/Thumbnail Cyclers</a>
<ul>
<li>cycleInterval - seconds (5)</li>
<li>cycleFadeDuration - 0-10 (4.5)</li>
<li>cyclePauseOnHover - true | <i>false</i></li>
</ul>
</li>

<li><a href="#general">General</a>
<ul>
<li>titleAsCaption - <i>true</i> | false</li>
<li>hideObjects - <i>true</i> | false</li>
<li>hideJava - <i>true</i> | false</li>
<li>showIE6EndOfLife - true | <i>false</i></li>
<li>modal - <i>true</i> | false</li>
<li>centerOnResize - <i>true</i> | false</li>
<li>disableScroll - true | <i>false</i></li>
<li>removeScrollbars - true | <i>false</i></li>
<li>minFlashVersion - version string (7)</li>
<li>autoEndVideo - <i>true</i> | false</li>
<li>attachTo - 'click' | elementID</li>
<li>framed - true | <i>false</i></li>
<li>autoTypes - 'type1|type2|...'</li>
<li>preloadAll - <i>true</i> | false</li>
<li>language - <i>'auto'</i> | 'en' | ... (see the languages folder)</li>
<li>floatboxClass - className ('floatbox')</li>
<li>cycleClass - className ('fbCycler')</li>
<li>tooltipClass - className ('fbTooltip')</li>
</ul>
</li>

<li><a href="#item">Item-Specific</a>
<ul>
<li>group - string</li>
<li>width - pixels | 'xx%' | 'max'</li>
<li>height - pixels | 'xx%' | 'max' | 'xx%w'</li>
<li>scrolling - 'auto' | 'no'</li>
<li>caption - string | #hiddenDivId</li>
<li>caption2 - string | #hiddenDivId</li>
<li>header - string | #hiddenDivId</li>
<li>footer - string | #hiddenDivId</li>
<li>type - 'ajax' | 'video' | 'image' | 'inline' | 'iframe' | 'flash' | 'quicktime' | 'wmp' | 'silverlight' | 'pdf'</li>
<li>showThis - <i>true</i> | false</li>
<li>sameBox - true | <i>false</i></li>
<li>altContent - string</li>
<li>info - source reference</li>
<li>tooltip - source reference</li>
<li>tooltipOptions - option string</li>
<li>backgroundColor - css color string</li>
<li>mobileNewWindow - true | <i>false</i></li>
<li>source - source reference</li>
<li>proportionalResize - true | false</li>
<li>autoStart - 'once' | true | <i>false</i></li>
<li>loadPageOnClose - 'self' | 'back' | url</li>
</ul>
</li>

<li><a href="#callbacks">Event Callbacks</a>
<ul>
<li>afterFBLoaded - callback function | eval string</li>
<li>beforeBoxStart - callback function | eval string</li>
<li>afterBoxStart - callback function | eval string</li>
<li>beforeItemStart - callback function | eval string</li>
<li>afterItemStart - callback function | eval string</li>
<li>beforeItemEnd - callback function | eval string</li>
<li>afterItemEnd - callback function | eval string</li>
<li>beforeBoxEnd - callback function | eval string</li>
<li>afterBoxEnd - callback function | eval string</li>
<li>beforePrint - callback function | eval string</li>
<li>afterPrint - callback function | eval string</li>
</ul>
</li>

</ul>
</div>

<div id="contents">

<div id="appearance" class="separator"></div>
<h3>Appearance</h3>

<p><b>roundCorners</b> - <i>'all'</i> | 'top' | 'none'<br />
Enables round corners on all corners, on just the top two, or 'none' disables all round corners (and you get square ones).
</p>

<p><b>cornerRadius</b> - 8 | <i>12</i> | 20<br />
When round corners are enabled, this defines the corner radius in pixels.
</p>

<p><b>shadowType</b> - <i>'drop'</i> | 'hybrid' | 'halo' | 'none'<br />
Set 3D shadow effect.
'drop' sets a 2-sided shadow on the right and bottom.
'hybrid' sets the full shadow on the right and bottom and a fainter half shadow on the left and top.
'halo' sets a full shadow on all 4 sides.
</p>

<p><b>shadowSize</b> - 8 | <i>12</i> | 16 | 24<br />
Sets the size in pixels of the drop or halo shadow.
</p>

<p><b>outerBorder</b> - pixels (1)<br />
Width of the border around the outside edge of the box.
If round corners are being used, the outerBorder size will not exceed the corner radius.
</p>

<p><b>innerBorder</b> - pixels (1)<br />
Width of the inside border around the edge of the main content.
</p>

<p><b>padding</b> - pixels (24)<br />
Width of the area between the floatbox content and the outer floatbox edges.
</p>

<p><b>panelPadding</b> - pixels (8)<br />
Gap above and below the contents of the floatbox frame area like the caption and close buttons.
Provides the vertical spacing between the floatbox outer edge, frame content, and main content.
</p>

<p><b>overlayOpacity</b> - 0-100 (55)<br />
Opacity of the full-screen page overlay. 0 is fully transparent, 100 is fully opaque.
</p>

<p><b>controlsOpacity</b> - 0-100 (60)<br />
Sets the opacity of the controls that can overlay the floatbox content area:
the overlayed prev/next controls, the image resize widget at the top left, and the drag-resizer at the bottom right.
</p>

<p><a href="#index">Back to Index</a></p>

<div id="animations" class="separator"></div>
<h3>Animations</h3>

<p><b>doAnimations</b> - <i>true</i> | false<br />
Setting doAnimations to false is a short-hand way of setting resizeDuration, imageFadeDuration and overlayFadeDuration all to 0.
When doAnimations is false, startAtClick, zoomImages, liveImageResize and splitResize all become irrelevant.
</p>

<p><b>resizeDuration</b> - 0-10 (3.5)<br />
Controls the speed at which animated resizing occurs.
0 = no resize animation, 1 is fast, 10 is slooow.
These are unit-less numbers, and don't equate to a fixed time period.
Larger size changes will take longer than smaller size changes.
</p>

<p><b>imageFadeDuration</b> - 0-10 (3)<br />
Controls the speed of the opacity fade-in for images as they come into the display.
0 = no image fade-in, 1 is fast, 10 is slooow. These too are unit-less numbers.
</p>

<p><b>overlayFadeDuration</b> - 0-10 (4)<br />
Controls the speed of the opacity fade-in and fade-out for the translucent overlay which covers the host page.
0 = no overlay fading in or out, 1 is fast, 10 is slooow. Unit-less.
</p>

<p><b>startAtClick</b> - <i>true</i> | false<br />
If true (and resizeDuration is not 0) floatbox will expand out from the clicked anchor and shrink back to that anchor when closed.
If false, floatbox will start and end from the center of the screen.
</p>

<p><b>zoomImages</b> - <i>true</i> | false<br />
If true (and resizeDuration is not 0) images will expand out from the clicked thumbnail on start and collapse back to the thumbnail on exit.
</p>

<p><b>splitResize</b> - <i>'no'</i> | 'auto' | 'wh' | 'hw'<br />
Default animated resizing of floatbox resizes width, height, top and left simultaneously.
splitResize settings other than 'no' give sequenced animation where the X and Y dimensions are resized seperately.
The two options 'wh' and 'hw' force either width or height to always go first.
The better splitResize option is probably 'auto'.  This will always do the smallest dimension first.
Using a splitResize of auto prevents unaesthetic resize behaviour of initially bloating up in the larger dimension.
</p>

<p><a href="#index">Back to Index</a></p>

<div id="colors" class="separator"></div>
<h3>Colors</h3>

<p><b>colorTheme</b> - 'auto' | 'black' | 'white' | 'blue' | 'yellow' | 'red' | 'custom'<br />
When colorTheme is 'auto', or no colorTheme option is specified, floatbox defaults to black for images, white for HTML content, and blue for multi-media.
Assigning a specific colorTheme setting overrides these defaults.
</p>

<p><b>mainColor</b>, <b>overlayColor</b>, <b>innerBorderColor</b>, <b>outerBorderColor</b> - css color<br />
Assign any standard css color to various floatbox components using these options.
The best approach when doing extensive appearance customizations is to set the desired options in a class definition in fbClassOptions on a page or in the global classOptions section of options.js.
Once this is done, the collection of option settings can be assigned to one or more floatboxed links simply by placing the assigned class name on them.
</p>

<p><b>textColor</b>, <b>strongTextColor</b> - css color<br />
These work the same as the other color options.
'textColor' applies to the 'item x of y' display, index links, and the 'open in a new window' link.
'strongTextColor' applies to captions, info and print links, and the new window link when it's hovered.
</p>

<p><a href="#index">Back to Index</a></p>

<div id="size" class="separator"></div>
<h3>Size</h3>

<p><b>autoFitImages</b> - <i>true</i> | false<br />
If set to true, large images will be proportionally scaled down to fit the current browser window dimensions before being displayed.
Note that if very large captions are assigned to an image, the caption may be dropped if auto-sizing can not leave enough room for its display.
To guarantee display of large captions, set autoFitImages to false and let the user scroll to see all of the image if necessary.
</p>

<p><b>autoFitHTML</b> - <i>true</i> | false<br />
If set to true, html content will be resized down to fit within the browser window.
Aspect ratio is not maintained unless proportionalResize is specified.
autoFitHTML is ignored and always false on mobile touch devices to facilitate showing html content at its full native height.
It will also not take effect if the scrolling option is set to 'no' (because you need scrollbars to see all the content in the downsized floatbox).
</p>

<p><b>autoFitMedia</b> - <i>true</i> | false<br />
If set to true, direct loaded multi-media content will be proportionally resized down to fit within the browser window.
</p>

<p><b>autoFitSpace</b> - pixels (5)<br />
The minimum space to leave between the floatbox edge and the browser window edge when autoFitting content.
</p>

<p><b>resizeImages</b> - <i>true</i> | false<br />
If resizeImages is set to true, images that have been autoSized to fit the screen, that have been resized with drag-resizing, or are displayed larger than the current screen size can be resized using the resize tool.
</p>

<p><b>resizeTool</b> - <i>'cursor'</i> | 'topleft' | 'both'<br />
Sets the tool used when resizeImages is true.
The cursor tool enables clicking on the image to resize and displays a magnifying glass to show when resizing is allowed.
The topleft tool is a small semi-transparent button in the top left corner of the image.
</p>

<p><b>liveImageResize</b> - <i>true</i> | false<br />
If true (and resizeDuration is not 0) images will remain displayed while they are being resized.
If false they will be hidden while an empty floatbox is seen to resize.
</p>

<p><b>enableDragResize</b> - true | <i>false</i><br />
If true, a small resize widget will be shown in the bottom right corner that people can drag with the mouse to resize the box.
Drag-resizing is always disabled on mobile touch devices because they have a better way of accomplishing the same task.
</p>

<p><b>stickyDragResize</b> - <i>true</i> | false<br />
As with stickyDragMove, stickyDragResize instructs floatbox to remember dragged size changes between different items in a gallery.
The stickyDragResize option applies only to proportionally resized content (images and multi-media)
and has no effect on html content.
</p>

<p><b>draggerLocation</b> - <i>'frame'</i> | 'content'<br />
The widget that is shown when enableDragResize is enabled can be placed either in the bottom right corner of the floatbox frame
or the bottom right corner of the displayed content by setting this option. (draggerLocation is always 'frame' for media content.)
</p>

<p><a href="#index">Back to Index</a></p>

<div id="position" class="separator"></div>
<h3>Position</h3>

<p><b>boxLeft</b>, <b>boxTop</b> - <i>'auto'</i> | pixels | '[-]xx%'<br />
By default, the main floatbox frame will be centered in the viewable browser screen area (with a little offset toward the top).
The boxLeft and boxTop options can be used to override this default positioning.
If set to simple integers, those integers will be taken as pixel values to place the floatbox at.
These pixel values are relative to the browser window, like fixed positioning, and not to the underlying document.
These options can also be set to percentage values such as '-50%'.
This will cause the floatbox frame to shift position that portion of the available free space.
For example, a boxLeft setting of '-50%' will move the floatbox half way to the left edge of the browser window.
To use default centering, set boxLeft and boxTop to 'auto'.
</p>

<p><b>captionPos</b> ('bl'), <b>caption2Pos</b> ('tc'), <b>infoLinkPos</b> ('bl'), <b>printLinkPos</b> ('bl'), <b>newWindowLinkPos</b> ('tr'), <b>itemNumberPos</b> ('bl'), <b>indexLinksPos</b> ('br') - 'tl' | 'tc' | 'tr' | 'bl' | 'bc' | 'br'<br />
These options control the positioning of the various widgets that can appear in the floatbox border area.
See the 'layout' section of the instructions for more detail if required.
Values are short-hand for top-left, top-center, top-right, bottom-left, bottom-center and bottom-right.
</p>

<p><b>controlsPos</b> - 'tl' | 'tr' | 'bl' | <i>'br'</i><br />
Sets the positioning of the control panel in the floatbox frame.
The control panel is the grouping containing control widgets like the close button, &lt;&lt;prev||next&gt;&gt;, etc.
Values are short-hand for top-left, top-right, bottom-left and bottom-right.
</p>

<p><b>centerNav</b> - true | <i>false</i><br />
The controls are positioned in one of the box's corners.  Usually the &lt; prev || next &gt; controls are right beside the close button.
With this option you can move the nav controls to the center of the top or bottom border area, away from the close button.
</p>

<p><b>enableDragMove</b> - <i>true</i> | false<br />
If true, a floatbox can be dragged around the screen by holding down the left mouse button on the floatbox frame outside of the main content area.
On mobile touch devices, drag-moving works with a single-finger move gesture.
For non-modal floatboxes (where the modal option is set to false) drag-moving is always enabled regardless of the value set for enableDragMove.
</p>

<p><b>stickyDragMove</b> - <i>true</i> | false<br />
In sets of multiple floatbox items (galleries), if strickyDragMove is false the dragged location is not retained when navigating to the next item.
Floatbox will return to its centered position with each new item.
When stickyDragMove is true, floatbox remembers its new screen position across item change-overs.
</p>

<p><a href="#index">Back to Index</a></p>

<div id="controls" class="separator"></div>
<h3>Controls</h3>

<p><b>showClose</b> - <i>true</i> | false<br />
Enables/disables display of the close button in the floatbox border area.
</p>

<p><b>showItemNumber</b> - <i>true</i> | false<br />
Controls display of the 'image/page x of y' text that appears below the caption.
Note that the text displayed is configured in the imageCount and iframeCount language localization options.
</p>

<p><b>showPrint</b> - true | <i>false</i><br />
If showPrint is set to true, a "Print..." link will be shown in the floatbox border area.
This print link invokes a print dialog that will print just the floatbox contents, not the underlying page.
(The "Print..." text is translated/regionalized in the language files.)
See the printCSS option for how to pass css stylings to the print content.
showPrint has no effect on Mobile Safari devices (iPhones etc.) and the print link won't be shown for these devices.
Nor will a print link be shown for cross-domain iframe content because cross-domain script blocking will prevent the printing from succeeding.
</p>

<p><b>printCSS</b> - css text | css filepath<br />
When showPrint is enabled, you may need to provide some css to format the print content the way you like.
You can provide css settings directly as text. For example, <span class="code">printCSS:`h3 {color: #123456;} a img {border: 2px solid black;}`</span>.
Or you can set printCSS to the path of an external css file and this will be applied to the print window contents.
E.g., <span class="code">printCSS:myPrint.css</span>.
</p>

<p><b>printText</b> - string<br />
Replaces the default text "Print..." (or the translated equivalent) used for the print link with text of your choice.
</p>

<p><b>infoOptions</b> - option string<br />
Used in conjunction with the 'info' option, this allows assigning configuration options to the secondary info floatbox using the standard options attribute syntax.
Wrap the infoOptions in backquotes for correct parsing and see the instructions and demo for more details.
</p>

<p><b>infoText</b> - string<br />
Replaces the default text "Info..." (or the translated equivalent) used for the info link with text of your choice.
For example, if you're displaying EXIF information through the info option, you may want to set infoText to "EXIF..."
</p>

<p><b>showNewWindow</b> - true | <i>false</i><br />
If showNewWindow is set to true, a "Open in a new window" link will be shown in the floatbox border area.
Clicking this link will open a new browser window or tab with the floatbox content loaded as an ordinary page.
("Open in a new window" is translated/regionalized in the language files.)
Use the showNewWindowIcon and closeOnNewWindow options in conjunction with showNewWindow.
</p>

<p><b>showNewWindowIcon</b> - <i>true</i> | false<br />
This works in conjunction with the showNewWindow option.
Set showNewWindowIcon to false to disable display of the small icon beside the 'Open in new window' text.
(showNewWindowIcon is always false on rtl (right-to-left) layout pages.)
</p>

<p><b>closeOnNewWindow</b> - true | <i>false</i><br />
When set to true, floatbox will end (close) when the newWindow link (described in the options reference and instructions) is clicked.
</p>

<p><b>controlsType</b> - <i>'auto'</i> | 'international' | 'english'<br />
controlsType is closely related to the language option.
When set to 'auto', visitors with localized English language browsers will see the floatbox control graphics that contain English text such as "close" and "next"
while non-English browser users will see graphics-only controls without the English text on them.
All browsers can be set to see the graphics-only controls by setting controlsType to 'international', or force English controls with the 'english' option.
</p>

<p><b>strongControls</b> - true | <i>false</i><br />
Setting this to true makes the controls (close button, prev/next, etc) appear always in their on or hovered state.
This can be helpful when trying to match against a custom color that is set in the 'mainColor' option or in the css.
</p>

<p><b>showHints</b> - 'always' | <i>'once'</i> | 'never'<br />
Controls display or mouseover tooltip messages for the nav and control buttons.
These tooltips are intended to be used to inform users about keyboard navigation shortcuts.
If set to 'once', each tooltip will deactivate after it has been displayed for sufficient time to be read.
They will also be deactivated if the user navigates with the associated keyboard shortcut.
If enableKeyboardNav is set to false, the tooltip nav messages will not be shown.
</p>

<p><b>outsideClickCloses</b> - <i>true</i> | false<br />
If set to true, floatbox will exit when the user clicks on the page overlay outside of the floatbox display.
</p>

<p><b>imageClickCloses</b> - true | <i>false</i><br />
If set to true, floatbox will exit when the user clicks on the displayed image.
When the navigation overlay is active (navType = overlay or both), the click-to-close space is the space left between the left and right navigation areas.
</p>

<p><b>enableKeyboardNav</b> - <i>true</i> | false<br />
Enables or disables the keyboard handler for prev, next, pause/play, resize and close actions.
</p>

<p><a href="#index">Back to Index</a></p>

<div id="galleries" class="separator"></div>
<h3>Galleries</h3>

<p><b>navType</b> - 'overlay' | 'button' | <i>'both'</i> | 'none'<br />
Sets the type of navigation controls to display.
'overlay' is the "Prev/Next" image overlay.'
'button' gives "&lt;&lt;prev||next&gt;&gt;" in the controls area of the floatbox frame.
Overlay navigation is not available for html and multi-media content, just for images.
</p>

<p><b>navOverlayWidth</b> - 0-50 (35)<br />
Sets the width in percentage of each of the left and right transparent overlay nav panels that provide navigation through mouse clicks on the displayed image.
If set to 50, each panel will be half the image width and so will meet without a gap in the middle.
40 leaves a 20% gap between panels, etc.
If image resizing is enabled and you're using the cursor tool, you'll want to leave a gap between the nav panels so that there's somewhere to click for resizing.
</p>

<p><b>navOverlayPos</b> - 0-100 (30)<br />
When the mouse is active over an image with navType 'overlay' or 'both' set, small prev/next graphics are displayed.
This setting is the percentage height from the image top that these graphics will appear.
0 puts them right at the top, and 100 places them at the bottom of the image.
</p>

<p><b>showNavOverlay</b> - 'always' | 'once' | <i>'never'</i><br />
Controls display of the overlayed navigation prev and next graphics for image content.
If set to 'once', these graphics will be displayed only for the first image shown, after which they are turned off.
The idea behind this is that once people are told what the mouse does over the image, they don't need to keep seeing the prev/next graphics continuously.
When the overlay nav graphics are turned off overlay nav still works, it is just not displayed.
When both the overlay and button nav types are enabled, the button nav controls will highlight as the mouse moves over active image areas.
</p>

<p><b>enableWrap</b> - <i>true</i> | false<br />
Enables gallery wrapping so that selecting 'next' on the last item wraps to the first, and selecting 'prev' on the first item wraps to the last.
Because gallery viewing can start anywhere in a series of images, it is probably a good idea to leave this set to true in most circumstances.
But if you are displaying something like a series of instructions that always starts with item #1 you may want to turn wrapping off.
The enableWrap option affects only mouse and keyboard navigation.
Even when enableWrap is set to false, a slideshow will wrap if started with an item other than #1 or if the slideshow endTask is set to 'loop'.
</p>

<p><b>numIndexLinks</b> - number (0)<br />
Index links are a grouping of numbered links that will jump floatbox to the selected item of a gallery set when clicked.
They look like this: <span style="white-space: nowrap;">"<u>1</u> <u>2</u> <u>3</u> <u>4</u> <u>5</u> ..."</span><br />
If set to 0, no index links will be shown.
If set to -1 or to a number greater than the number of items in a gallery set, all index links will be shown - one for each item in the gallery.
If set to a positive integer less than the number of gallery items, only that number of links will be shown.
For example, if maxIndexLinks = 9 for a 99 item gallery you get something like
<span style="white-space: nowrap;">"<u>1</u> ... <u>12</u> <u>13</u> <u>14</u> 15 <u>16</u> <u>17</u> <u>18</u> ...  <u>99</u>"</span>
</p>

<p><b>showIndexThumbs</b> - <i>true</i> | false<br />
Controls the display of popup thumbnails in the indexLinks group.
If true, thumbnail popups will be displayed when an index link is hovered.
</p>

<p><b>maxIndexThumbSize</b> - pixels (0)<br />
The popup thumbnails used in the index links are taken from the img elements inside the associated anchor on your base page.
These thumbnails may be larger than you would like to see for the index links popup thumbnails.
You can limit the popup size by setting maxIndexThumbSize to the pixel size you want the thumbnail's largest dimension restricted to.
If maxIndexThumbSize is 0, the index link thumbnails will be shown at their native size.
</p>

<p><b>randomOrder</b> - true | <i>false</i><br />
Gallery sets of multiple items normally are ordered by their position in the html document.
By setting randomOrder to true, you can shuffle your gallery sets to a random order.
This can be a nice touch for some slideshows.
</p>

<p><a href="#index">Back to Index</a></p>

<div id="slideshows" class="separator"></div>
<h3>Slideshows</h3>

<p><b>doSlideshow</b> - true | <i>false</i><br />
If set to true, images in a gallery set will be launched as a slideshow.
</p>

<p><b>slideInterval</b> - seconds (4.5)<br />
This is the number of seconds to display each image in a slideshow before moving on to the next one.
Per-item intervals can be assigned to the item options of individual slideshow members.
</p>

<p><b>endTask</b> - 'stop' | <i>'exit'</i> | 'loop'<br />
Describes what to do when all images in a slideshow have been seen.
Note that if a slideshow was started on other than the 1st image, it will wrap around until all images have been seen before acting on the endTask directive.
</p>

<p><b>showPlayPause</b> - <i>true</i> | false<br />
Turns display of the slideshow play &amp; pause controls on or off.
</p>

<p><b>startPaused</b> - true | <i>false</i><br />
If true, a slideshow will start in a paused state.  If false, the slideshow will auto-play on start.
</p>

<p><b>pauseOnPrev</b> - <i>true</i> | false<br />
If set to true, the slideshow will pause when a 'prev' contol is clicked or when the corresponding keyboard action (left arrow) is fired.
</p>

<p><b>pauseOnNext</b> - true | <i>false</i><br />
If set to true, the slideshow will pause when a 'next' contol is clicked or when the corresponding keyboard action (right arrow) is fired.
</p>

<p><b>pauseOnResize</b> - <i>true</i> | false<br />
If set to true, the slideshow will pause when the current content is resized through use of the resize tool.
</p>

<p><a href="#index">Back to Index</a></p>

<div id="tooltips" class="separator"></div>
<h3>Tooltips</h3>
<p>Tooltip options cannot be set globally, per page, nor by class.
Tooltip options are set either directly on the tooltipped element with a data-fb-tooltip attribute
or assigned to the tooltip type either globally in the per-type section of options.js or in a per-page fbTypeOptions definition.
See the Tooltips section of <a href="instructions.html">the instructions</a> for details.
</p>

<p><b>source</b> - a content reference<br />
This is the reference to the content that will be shown as the tooltip.
Commonly, source will point to a hidden div on the page with a syntax like
<span class="code">"source:#myDivId"</span>, but it can also be a path to any kind of floatboxable content.
e.g., <span class="code">"source:`myTooltip.html`"</span> to bring in an external page as the tooltip.
The source can be set only in the data-fb-tooltip attribute for each tooltipped element.
</p>

<p><b>attachToHost</b> - true | <i>false</i><br />
If true, the tooltip will be placed immediately adjacent to the host element (either above or below)
and will not move with the mouse.
This allows the mouse to be active inside the open tooltip and thereby allows clickable links to be placed in the tooltip content.
(A tooltip can be assigned to an &lt;area&gt; element, but cannot be attached to it.)
</p>

<p><b>moveWithMouse</b> - true | <i>false</i><br />
Not surprisingly, if this is set to true the tooltip will move with mouse movements.
The default of false leaves the tooltip positioned at its starting location regardless of subsequent mouse moves.
</p>

<p><b>placeAbove</b> - true | <i>false</i><br />
If true, the tooltip will appear above the host element.
The default placement is below the element or mouse cursor depending on whether attachToHost is set or not.
If the requested placement would make the tooltip appear partially offscreen,
the placement will be moved so that the entire tooltip shows.
</p>

<p><b>timeout</b> - seconds (0)<br />
Number of seconds to show a tooltip before terminating it.
The default of zero sets no timeout and the tooltip will be shown as long as the mouse remains hovered.
</p>

<p><b>delay</b> - milliseconds (80)<br />
Delay in milliseconds between the element mouseover event and the display of the tooltip.
</p>

<p><b>mouseSpeed</b> - pixels per second (120)<br />
The mouse must be moving at a speed less than mouseSpeed in order for the tooltip to appear.
</p>

<p><b>fadeDuration</b> - 0-10 (3)<br />
This is a unitless setting (not seconds) that controls the duration of the opacity fade in and out of the tooltip when it starts and ends.
0 is no fade and 10 is very slow.
Note fadeDuration is always 0 for Internet Explorer pre version 9 because IE is atrociously bad at fading text and tooltips usually contain text.
</p>

<p><b>defaultCursor</b> - true | <i>false</i><br />
In most browsers, the mouse cursor will change to a text selection tool whenever it is hovered over text.
Setting defaultCursor to true forces the default arrow cursor to be in effect for all of the tooltip-enabled host element.
</p>

<p><a href="#index">Back to Index</a></p>

<div id="cyclers" class="separator"></div>
<h3>Image/Thumbnail Cyclers</h3>

<p><b>cycleInterval</b> - seconds (5)<br />
The number of seconds between each turnover of the displayed image in a set of cycling images or thumbnails.
cycleInterval can be set on individual cycle set members to provide a different delay for different items in the set.
See the cycler section of <a href="instructions.html">the instructions</a> for details.
</p>

<p><b>cycleFadeDuration</b> - 0-10 (4.5)<br />
Controls the speed of the fade in/out of the images in a set of cycling images or thumbnails.
1 is really fast, 10 is slow. Unit-less.
</p>

<p><b>cyclePauseOnHover</b> - true | <i>false</i><br />
If set to true, image and thumbnail cyclers will pause and hold the current image while the mouse is hovered over it.
</p>

<p><a href="#index">Back to Index</a></p>

<div id="general" class="separator"></div>
<h3>General</h3>

<p><b>titleAsCaption</b> - <i>true</i> | false<br />
True by default, this instructs floatbox to display an anchor's title attribute as its caption when no caption value is explicitly set.
Turn this behaviour off by setting titleAsCaption to false.
See the 'caption' and 'caption2' options for details on how to set caption content.
</p>

<p><b>hideObjects</b> - <i>true</i> | false<br />
If true, objects and embeds (flash, quicktime, silverlight, etc.) on the host page will be hidden while a floatbox is being displayed.
This is generally a good idea as most objects will appear on top of the floatbox display if not hidden.
Flash objects using the default wmode of 'window' have this problem (feature?).
If you set your flash objects to have a wmode of 'opaque' or 'transparent' they will not appear over top of the other content
and you won't need to enable hideObjects.
</p>

<p><b>hideJava</b> - <i>true</i> | false<br />
Just like hideObjects but for Java applets.
</p>

<p><b>showIE6EndOfLife</b> - true | <i>false</i><br />
Please see the description of this in the instructions and seriously consider turning this on for all sites.
</p>

<p><b>modal</b> - <i>true</i> | false<br />
When modal is true, floatbox will overlay the whole page with a translucent layer,
the underlying page will be unreachable until the box is closed,
and any secondary floatboxes will be stacked on top of any already-opened boxes.
Setting modal to false removes the translucent page overlay,
allows the underlying page to be accessed while one or more floatboxes are open,
and allows multiple open floatboxes to be re-arranged and restacked.
</p>

<p><b>centerOnResize</b> - <i>true</i> | false<br />
When set to true, floatbox will reposition itself toward the center of the screen when the browser window is resized.
</p>

<p><b>disableScroll</b> - true | <i>false</i><br />
If true, floatbox will use fixed positioning.
Fixed positioning locks floatbox in a fixed screen location that will not move in response to scrollbar actions.
Because scrolling is not available when fixed positioning is used, it is not set if the current displayed content is larger than the available screen dimensions.
Note that fixed positioning is always set for iframe and quicktime content in firefox 2 (if it fits the screen) to workaround some display issues with that browser,
and it is never set for Mobile Safari (iPhones, etc.) or IE6 because those browsers can't do it.
</p>

<p><b>removeScrollbars</b> - true | <i>false</i><br />
When disableScroll is active, the scrollbars on the main page can be removed by setting removeScrollbars to true.
This will prevent unwanted scrolling of the host page underneath the floatbox when the mouse wheel is used to scroll fixed-position floatbox content.
</p>

<p><b>minFlashVersion</b> - version string (7)<br />
When direct-loading flash, you can require that a minimum version of flash is installed on the visitor's browser.
If the required version is not present, floatbox will show a language-localized message to that effect and present a link for getting the latest flash version.
The version string must include the major version number and may include the minor and revision numbers.
For example, 10, 10.1 and '10.1.23' are all valid version strings.
The default is version 7 because earlier versions cannot play most modern flash files.
</p>

<p><b>autoEndVideo</b> - <i>true</i> | false<br />
A floatbox showing direct-loaded YouTube, QuickTime or Windows Media Player video will close automatically when the video ends unless autoEndVideo is set to false.
WMP will also close if the stop button is pressed in the player's controls.
Note that iframe-based video loaded with "type:video" cannot auto-end.
</p>

<p><b>attachTo</b> - 'click' | elementID<br />
Use 'attachTo' to enhance accessibility of web pages by providing correct sequencing or placement of floatbox content,
or to attach the floatbox to an ASP.NET form.
When set to 'click', the floatbox will attach in the document tree just after the element that was clicked to launch the floatbox.
To place the floatbox inside a particular element, such as a form, specify the id for that element.
More information is available in the 'Attach to a specific document element' section of the instructions.
</p>

<p><b>framed</b> - true | <i>false</i><br />
Use the framed option to attach floatbox to an iframe or frameset child window.
This will constrain floatbox to the frame area only instead of having it overlay the entire top document.
For frameset pages, floatbox.js must be included in a child frame document, not in the frameset document itself,
and the 'framed' option must be set.
The 'framed' option can be set either as a querystring on the floatbox.js include line, or set to true in fbPageOptions.
See the "Constraining Floatbox..." section in the instructions for details and examples.
</p>

<p><b>autoTypes</b> - 'type1|type2|...'<br />
The autoTypes option is unique in that it can only go on a containing element that is used to propogate floatbox activation to its child elements.
(See "Activating elements" in the instructions).<br />
The autoTypes option limits what content types will be activated within the containing div.<br />
It is a string of valid type names separated by the '|' character, and is useful only for content types that can be indentified by their href paths and file extensions.
Valid type names are 'image', 'iframe', 'flash', 'quicktime', 'wmp', 'silverlight', 'pdf', and 'media' for all 5 multi-media types.
(Note that YouTube and other media service links are recognized as flash content.)<br />
For example, to activate all images, flash and pdf links on a page:
<span class="code">&lt;body class="floatbox" data-fb-options="autoTypes:image|flash|pdf"&gt;</span>
</p>

<p><b>preloadAll</b> ** - <i>true</i> | false<br />
If true, floatbox will aggressively preload all images that are referenced by floatboxed anchors.
This makes floatbox quite responsive because images are available and can be displayed as soon as the site visitor clicks on or navigates to one.
If you wish to lighten your server and network load, you can set preloadAll to false.
When preloadAll is false, the first image found on a page will be preloaded and gallery sets will preload the next image in sequence when an image from the set is shown.
Without preloadAll set, a site visitor may get the spinning loader graphic while waiting for an image to download.
</p>

<p><b>language</b> ** - <i>'auto'</i> | 'en' | ... (see the languages folder)<br />
Floatbox provides international localization through the json files in the languages folder.
When the language option is set to 'auto', floatbox will detect the visitor's browser language preference and use that language for its tooltips and other text.
You can force a particular language by setting it here.
Doing this will set that language for everyone visiting your site, regardless of where they are coming from.
</p>

<p><b>floatboxClass</b> ** ('floatbox'), <b>cycleClass</b> ** ('fbCycler'), <b>tooltipClass</b> ** ('fbTooltip') - className<br />
The class names that are used to activate floatbox elements can be changed in order to avoid conflicts with other html and css.
For example, if the 'floatbox' class is already used for other purposes, the floatboxClass option can be changed to 'fbBox' or some other unused class name.
</p>

<p>** 'preloadAll', 'language', and the 3 '*Class' names can not be set as type, class or item options.
They can be set only in the globalOptions section of options.js or in a page-specific fbPageOptions javascript object.
</p>

<p><a href="#index">Back to Index</a></p>

<div id="item" class="separator"></div>
<h3>Item-Specific</h3>
<p>Options in this section do not have default values defined.
While most of these options can be applied globally, per page, per type and per class,
they usually make sense only when assigned on a per item basis.
</p>

<p><b>group</b> - string<br />
Anchors that have the same group option set on them will form a gallery set that can be navigated with the prev/next buttons or shown as a slideshow.
</p>

<p><b>width</b>, <b>height</b> - pixels | 'xx%' | 'max' | 'xx%w'<br />
Width and height set in the options control floatbox content size.
Plain integers are the size in pixels.
If a percentage is given, like "85%", floatbox will be sized to that portion of the available browser viewport area.
One or both of width and height can be set to 'max' to size the content to the current browser display width and/or height.
The height option can also accept a format like "60%w" which will set the height to be 80% of the width size.
This can be useful for maintaining aspect ration of content while setting the width to be proportional to viewport size.
A typical options tag containing dimension settings for multi-media content might look like this: <span class="code">data-fb-options="width:360 height:240"</span> or <span class="code">data-fb-options="width:75% height:60%w"</span>.
For compatability with pages already configured for other lightbox clones, you can also use the css-like syntax of <span class="code">data-fb-options="width:360px; height:240px;"</span>.
Width and height options can apply to images, but they're intended for html and multimedia content.
You are better off letting images auto-size as that will maintain the correct proportions.
Note that for html content of type ajax, inline, or direct, you're best off setting only a width either in the options or in the html itself,
and letting floatbox measure and auto-set the height of the content.
This allows floatbox to get correct sizing across different browsers that have small variations in the way they layout pages.
</p>

<p><b>scrolling</b> - <i>'auto'</i> | 'no'<br />
The scrolling option the display of the scroll bars for the floatbox content.
If no scrolling value is present, image and media content defaults to 'scrolling:no' and html content (iframe page, ajax, hidden div, inline) defaults to 'scrolling:auto'.
Except, if height is not set on an html item, causing that item to be auto-sized, scrolling will default to 'no'.
The 'auto' setting in theory will show scrollbars only if the the content is bigger than the floatbox area,
but in practice some browsers always show scrollbars when set to 'auto'.
</p>

<p><b>caption, caption2 - string | #hiddenDivId</b><br />
To display a caption in floatbox, you can use the title attribute of an &lt;a&gt; element when titleAsCaption is set to true,
or you can set a 'caption' option in the anchor's data-fb-options (or rev) attribute.
Setting it directly in the caption option allows you to have a different or no tooltip for the anchor mouse-overs, lets you use html markup in your caption, and is the recommended approach.
When assigned in a data-fb-options setting, the text of the caption option must be surrounded by backquote characters (`) so as not to break parsing of the option string.<br />
Example: <span class="code">data-fb-options="caption:`This is my kool kaption`"</span><br />
A second caption can be assigned to a floatbox item by setting 'caption2' in the same manner as 'caption'.<br />
The easiest way to include html content in a caption is to reference a hidden div that contains the desired content, like this:
<span class="code">data-fb-options="caption:#myCaptionDiv"</span><br />
You can also place encoded html directly in the caption string.
See the "Captions" section of the instructions for details.
</p>

<p><b>header, footer - string | #hiddenDivId</b><br />
Display transparent-background content immediately above or below the floatbox with the header and footer options.
These can be set in the same manner as captions described above, and can use direct text, encoded html, or a reference to a hidden div (recommended).
Although described here in the item-specific section of this Options Reference, like all options header and footer can be assigned globally, per page, by type, and by class name.
</p>

<p><b>type</b> - 'ajax' | 'video' | 'image' | 'inline' | 'iframe' | 'flash' | 'quicktime' | 'wmp' | 'silverlight' | 'pdf'<br />
Floatbox auto-detects content type based on the href file extension, but there are occasions where auto-detection can't work.
Two examples are content that is to be loaded via AJAX and iframe-based video embeds.
To load AJAX content, you need to set "type:ajax" in the anchor's data-fb-options attribute.
For iframe-based video, set "type:video" in the options.
You may also need to set the type option for images that do not have a standard image file extension but are delivered by mime type from, say, a php page.
</p>

<p><b>showThis</b> - <i>true</i> | false<br />
An anchor with <span class="code">"showThis:false"</span> in its data-fb-options (or rev) attribute will not be added to a gallery or slideshow collection.
However, other options set on the anchor will take effect.
The showThis option is there primarily to enable a clickable link to display a gallery as a slideshow.
Such a link would have at least the following in its options attribute: <span class="code">data-fb-options="showThis:false doSlideshow:true group:xyz"</span>.
The 'group' option is necessary to identify which gallery set this link is associated with.
</p>

<p><b>sameBox</b> - true | <i>false</i><br />
The default behaviour when floatboxed content is invoked while an existing floatbox is already being displayed is to display the new content in a new secondary floatbox over top of the existing one.
Use sameBox:true to cause the new content to replace the existing content within the existing floatbox and not open up a second box.
</p>

<p><b>altContent</b> - string<br />
Provide alternate content for floatboxed images and iframes by assigning text to the 'altContent' option.
This accessibility enhancement is described in greater detail, with examples, in the 'Accessible content' section of the floatbox instructions.
</p>

<p><b>info</b> - source reference<br />
Assigning a url or other source type to the info option will make floatbox display an "Info..." link that will load the referenced source in a new secondary floatbox.
See the instructions and demo for more details.
</p>

<p><b>tooltip</b> - source reference<br />
To show an enhanced tooltip over top of standard floatbox content, set the tooltip option to the the source of the tooltip content.
This will most often be a hidden div reference like '#someHiddenDivId', but can be any valid floatbox source reference.
</p>

<p><b>tooltipOptions</b> - option string<br />
When the tooltip option is set on a floatboxed anchor, the tooltipOptions setting can be used to assign options to the enhanced tooltip itself.
This setting takes a standard floatbox option string of name:value pairs, but the string must be surrounded by back-quotes for correct parsing.
</p>

<p><b>backgroundColor</b> - css color string<br />
The standard background color of floatbox's content area is set in floatbox.css as white.
If a different background color is required for some content, the desired color can be assigned by setting the 'backgroundColor' option.
Valid values are any color values that can be assigned via css.
</p>

<p><b>mobileNewWindow</b> - <i>true</i> | false<br />
When set to true, Mobile Safari devices such as iPhones etc. will open the target content in a new browser window while other browsers will open the content in a floatbox.
This is useful when the content to be displayed is too large to handle cleanly on the small device screens.
Cross-domain iframes and direct-loaded pdf content is always shown in a new window on mobile devices regardless of the mobileNewWindow setting.
</p>

<p><b>source</b> - source reference<br />
A "source:`...`" option, usually set in the data-fb-options or rev attribute, will override the href defined on a floatbox-enabled anchor.
Floatbox will use the source option value, while browsers with javascript disabled will load the anchor's standard href value.
This can be used to provide alternate content for javascript-disabled clients.
'source' can be any content type (url, ajax, inline div, or direct html).
There's an example titled 'Alternate content for javascript-disabled browsers' in the instructions.
</p>

<p><b>proportionalResize</b> - true | false<br />
When enableDragResize or one of the autoSize settings is true, the default behaviour is to resize images and multi-media proportionally and allow aproportional resizing of html content.
This default behaviour can be overidden per item by setting proportionalResize to true or false.
</p>

<p><b>autoStart</b> - 'once' | true | <i>false</i><br />
If you place <span class="code">"autoStart:true"</span> in the data-fb-options attribute of a floatbox enabled &lt;a&gt; element,
the associated image or iframe will be automatically started on host page load without the user clicking on any content.
An autoStart setting of 'once' will cause that item to auto-display in floatbox only on the first load of the host page per browser session.
Note, you can also set autoStart in the page's query string as described in the instructions.
</p>

<p><b>loadPageOnClose</b> - 'self' | 'back' | url<br />
This controls browser behaviour when floatbox closes.
If set to the string 'self', the host page will be refreshed on exit.
If set to 'back', the previous page in the browser's history list will be loaded.
(Please see the 'Auto-start and exit tasks' section of the instructions for details of a Firefox bug which can interfere with 'loagPageOnClose:back'.)
If loadPageOnClose is set to a string other than 'self' or 'back', that string is assumed to be a valid url and the browser will be instructed to load that page.
When loadPageOnClose is set to a url it must be enclosed in backquotes (`) so as not to break parsing of the option string.
Note that when using the API call 'fb.end()' to close a box, the loadPageOnClose value can be passed directly to that function as a parameter.
E.g., <span class="code">fb.end('/somePage.html')</span>
See the API reference for details.
</p>

<p><a href="#index">Back to Index</a></p>

<div id="callbacks" class="separator"></div>
<h3>Event Callbacks</h3>

<p><b>afterFBLoaded, beforeBoxStart, afterBoxStart, beforeItemStart, afterItemStart, beforeItemEnd, afterItemEnd, beforeBoxEnd, afterBoxEnd, beforePrint, afterPrint</b> - function | eval string<br />
These are callback functions that can be set in the same manner as other Floatbox options.
See <a href="api.html">the API reference</a> for details on these callbacks and much more of Floatbox's programmability.
</p>

<p><a href="#index">Back to Index</a></p>

<div class="separator"></div>
</div>

</div>
</body>
</html>
